<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title> Dashboard</title>
		<meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
		<meta name="description" content="Developed By M Abdur Rokib Promy">
		<meta name="keywords" content="Admin, Bootstrap 3, Template, Theme, Responsive">
		<!-- bootstrap 3.0.2 -->
		<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
		<!-- font Awesome -->
		<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css" />
		<!-- Ionicons -->
		<link href="css/ionicons.min.css" rel="stylesheet" type="text/css" />
		<!-- Morris chart -->
		<link href="css/morris/morris.css" rel="stylesheet" type="text/css" />
		<!-- jvectormap -->
		<link href="css/jvectormap/jquery-jvectormap-1.2.2.css" rel="stylesheet" type="text/css" />
		<!-- Date Picker -->
		<link href="css/datepicker/datepicker3.css" rel="stylesheet" type="text/css" />
		<!-- fullCalendar -->
		<!-- <link href="css/fullcalendar/fullcalendar.css" rel="stylesheet" type="text/css" /> -->
		<!-- Daterange picker -->
		<link href="css/daterangepicker/daterangepicker-bs3.css" rel="stylesheet" type="text/css" />
		<!-- iCheck for checkboxes and radio inputs -->
		<link href="css/iCheck/all.css" rel="stylesheet" type="text/css" />
		<!-- bootstrap wysihtml5 - text editor -->
		<!-- <link href="css/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css" rel="stylesheet" type="text/css" /> -->
		<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
		<!-- Theme style -->
		<link href="css/style.css" rel="stylesheet" type="text/css" />

		<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
		<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
		<!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
          <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
          <![endif]-->

		<style type="text/css">

		</style>
	</head>

	<body class="skin-black">
		<header class="header">
			<a href="index.html" class="logo">
				后台管理系统
			</a>
			<nav class="navbar navbar-static-top" role="navigation">
				<div class="navbar-right">
					<ul class="nav navbar-nav">

						<li class="dropdown user user-menu">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown">
								<i class="fa fa-user"></i>
								<span>Admin <i class="caret"></i></span>
							</a>
							<ul class="dropdown-menu dropdown-custom dropdown-menu-right">
								<li>
									<a href="#"><i class="fa fa-ban fa-fw pull-right"></i> Logout</a>
								</li>
							</ul>
						</li>
					</ul>
				</div>
			</nav>
		</header>
		<div class="wrapper row-offcanvas row-offcanvas-left">
			<!-- Left side column. contains the logo and sidebar -->
			<aside class="left-side sidebar-offcanvas">
				<!-- sidebar: style can be found in sidebar.less -->
				<section class="sidebar">
					<!-- Sidebar user panel -->
					<div class="user-panel">
						<div class="pull-left image">
							<img src="img/26115.jpg" class="img-circle" alt="User Image" />
						</div>
						<div class="pull-left info">
							<p>hello，Admin</p>

							<a href="#"><i class="fa fa-circle text-success"></i> Online</a>
						</div>
					</div>

					<!-- /.search form -->
					<!-- sidebar menu: : style can be found in sidebar.less -->
					<ul class="sidebar-menu">
						<li class="active">
							<a href="index.html">
								<i class="fa fa-dashboard"></i> <span>工作台</span>
							</a>
						</li>
						<li>
							<a href="product.html">
								<i class="fa fa-gavel"></i> <span>商品管理</span>
							</a>
						</li>

						<li>
							<a href="order.html">
								<i class="fa fa-globe"></i> <span>订单管理</span>
							</a>
						</li>

						<li>
							<a href="user.html">
								<i class="fa fa-glass"></i> <span>用户管理</span>
							</a>
						</li>

					</ul>
				</section>
				<!-- /.sidebar -->
			</aside>

			<aside class="right-side">

				<!-- Main content -->
				<section class="content">

					<div class="row" style="margin-bottom:5px;">
						<div class="col-md-3">
							<div class="sm-st clearfix">
								<span class="sm-st-icon st-red"><i class="fa fa-check-square-o"></i></span>
								<div class="sm-st-info">
									<span id="totalSales">3200</span> 总销售额
								</div>
							</div>
						</div>
						<div class="col-md-3">
							<div class="sm-st clearfix">
								<span class="sm-st-icon st-violet"><i class="fa fa-envelope-o"></i></span>
								<div class="sm-st-info">
									<span id="totalUser">2200</span> 总用户数
								</div>
							</div>
						</div>
						<div class="col-md-3">
							<div class="sm-st clearfix">
								<span class="sm-st-icon st-blue"><i class="fa fa-dollar"></i></span>
								<div class="sm-st-info">
									<span id="orderGoods">100,320</span> 已成交订单数
								</div>
							</div>
						</div>
						<div class="col-md-3">
							<div class="sm-st clearfix">
								<span class="sm-st-icon st-green"><i class="fa fa-paperclip"></i></span>
								<div class="sm-st-info">
									<span id="notOrderGoods">4567</span> 未成交订单数
								</div>
							</div>
						</div>
					</div>

					<!-- Main row -->
					<div class="row">
						<div id="userZS" class="col-md-6" style="height: 300px;" style="margin-left: 50px;">
						</div>
						<div id="userYH" class="col-md-6" style="height: 300px;">
						</div>
					</div>
					<div class="row">
						<div class="col-xs-12">
							<div class="panel">
								<header class="panel-heading">
									系统日志
								</header>
								<div class="panel-body table-responsive">

									<table class="table table-hover">
										<tr>
											<th>ID</th>
											<th>User</th>
											<th>Date</th>
											<th>Status</th>
											<th>Reason</th>
										</tr>
										<tr>
											<td>183</td>
											<td>John Doe</td>
											<td>11-7-2014</td>
											<td><span class="label label-success">INFO</span></td>
											<td>Completed initialization in 2 ms</td>
										</tr>
										<tr>
											<td>219</td>
											<td>Jane Doe</td>
											<td>11-7-2014</td>
											<td><span class="label label-warning">DEBUG</span></td>
											<td>Bacon ipsum dolor sit amet salami venison chicken flank fatback doner.</td>
										</tr>

									</table>
								</div>
								<!-- /.box-body -->
							</div>
							<!-- /.box -->
						</div>
					</div>
					<div class="footer-main">
						Copyright &chen, 2021
					</div>
			</aside>
			<!-- /.right-side -->

		</div>
		<!-- ./wrapper -->

		<script src="js/jquery.min.js" type="text/javascript"></script>
		<script src="js/jquery-ui-1.10.3.min.js" type="text/javascript"></script>
		<script src="js/bootstrap.min.js" type="text/javascript"></script>
		<script src="js/plugins/daterangepicker/daterangepicker.js" type="text/javascript"></script>
		<script src="js/plugins/chart.js" type="text/javascript"></script>
		<script src="js/plugins/iCheck/icheck.min.js" type="text/javascript"></script>
		<script src="js/plugins/fullcalendar/fullcalendar.js" type="text/javascript"></script>
		<script src="js/Director/app.js" type="text/javascript"></script>
		<script src="js/Director/dashboard.js" type="text/javascript"></script>
		<script type="text/javascript">
			$('input').on('ifChecked', function(event) {
				$(this).parents('li').addClass("task-done");
				console.log('ok');
			});
			$('input').on('ifUnchecked', function(event) {
				$(this).parents('li').removeClass("task-done");
				console.log('not');
			});
		</script>
		<script>
			$('#noti-box').slimScroll({
				height: '400px',
				size: '5px',
				BorderRadius: '5px'
			});

			$('input[type="checkbox"].flat-grey, input[type="radio"].flat-grey').iCheck({
				checkboxClass: 'icheckbox_flat-grey',
				radioClass: 'iradio_flat-grey'
			});
		</script>
		<script src="js/echarts.js"></script>
		<script src="js/page/config.js"></script>
		<script type="text/javascript">
			function result() {

				this.timeSales = [],
					this.weekSales = []
			}
			var result = new result();
			$.ajax({
				url: "http://1.15.177.112:8080/index/index",
				data: '',
				type: 'post',
				headers: {
					'admin': headerX
				},
				contentType: 'application/json',
				success: function(data) {
					if(data.code == 10006) {
						localStorage.clear();
						$(window).attr('location', "login.html");
					}
					$("#totalSales").text(data.data.totalSales);
					$("#totalUser").text(data.data.totalUser);
					$("#orderGoods").text(data.data.orderGoods);
					$("#notOrderGoods").text(data.data.notOrderGoods);
					result.timeSales = data.data.timeSales;
					result.weekSales = data.data.weekSales;

					var userZS = echarts.init(document.getElementById('userZS'));
					option = {
						title: {
							text: '商品销售额（本周）'
						},
						xAxis: {
							type: 'category',
							data: data.data.timeSales
						},
						yAxis: {
							type: 'value'
						},
						series: [{
							data: data.data.weekSales,
							type: 'line'
						}]
					};
					userZS.setOption(option);
					var userYH = echarts.init(document.getElementById('userYH'));

					option = {
						title: {
							text: '成交订单量（本周）'
						},
						xAxis: {
							type: 'category',
							data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
						},
						yAxis: {
							type: 'value'
						},
						series: [{
							data: [120, 200, 150, 80, 70, 110, 130],
							type: 'bar',
							showBackground: true,
							backgroundStyle: {
								color: 'rgba(180, 180, 180, 0.2)'
							}
						}]
					};
					userYH.setOption(option);

				}
			})
		</script>
	</body>

</html>